<template>
  <div id="vanCard" v-if="teamListJoin != null && teamListJoin.length > 0">
    <van-card v-for="team in teamListJoin"
              :desc="team.description"
              :title="team.name"
              :thumb="team.imageUrl"
    >
      <template #tags style="margin-bottom: 3px;margin-top: 10px">
        <van-image v-for="user in team.userList" style="margin-right: 4px;margin-top: 3px"
                   round
                   width="25px"
                   height="25px"
                   :src="user.avatarUrl"
                   fit="cover"
        />
      </template>
      <template #bottom style="margin-bottom: 3px">
        <div>
          队伍需{{team.maxNum}} | 现人数{{team.currentTeamNum}} {{team.maxNum == team.currentTeamNum ? '已满' : ''}}
          <van-tag style="margin-left: 3px" plain type="primary">{{teamStatus[team.status]}}</van-tag>
        </div>
        <div>
          过期时间：{{team.expireTime}}
        </div>
      </template>

      <template #footer>
        <!--我觉得不要进入聊天室，直接聊天去查就好了-->
<!--        <van-button size="mini" plain type="success" @click="goToChat(team.id,team.name)">进入聊天室</van-button>-->
        <van-button size="mini" plain type="primary" @click="quitTeamAction(team.id,team.name)">退出队伍</van-button>
        <van-button size="mini" plain color="black" @click="checkTeamInfo(team)">查看队伍</van-button>
      </template>
    </van-card>
  </div>

  <van-empty image="search" description="队伍暂无" v-if="!teamListJoin || teamListJoin.length < 1" />



</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {teamStatus} from "../constant/TeamStatus.ts";
import {ref, watch} from "vue";
import {showConfirmDialog, showToast} from "vant";
import {quitTeam} from "../api/teamApi.ts";


//组件传递
const props = defineProps(['teamListJoin']);
const teamListJoin = ref(props.teamListJoin);
//监听函数，监听props属性父组件传递给子组件的数据变化，因为props不能被修改！，但是teamListRecommend又监听不到！
watch(
    () => props.teamListJoin,
    (newValue) => {
      teamListJoin.value = newValue;//监听变化的新值
      console.log("监听变化teamListJoin：",teamListJoin.value);
    },
    { immediate: true }
);



const router = useRouter();


//退出队伍方法
const quitTeamAction = (teamId:bigint,teamName:string)=>{
  showConfirmDialog({
    title: '退出队伍',
    message:
        '确定要退出' + teamName + '队伍吗？',
  }).then(() => {
    quitTeam({id:teamId}).then(res => {
      if (200 === res.code){
        teamListJoin.value = teamListJoin.value.filter(team => team.id == teamId);
        showToast( "退出" + teamName + "队伍成功");
      }else {
        showToast("退出" + teamName + "队伍失败");
      }
    });
  }).catch(() => {
    // on cancel
  });

}

//进入聊天室
// const goToChat = (teamId:bigint,teamName:string) =>{
//   router.push('/chat');
// }


//查看队伍信息
const checkTeamInfo = (team)=>{
  const userIdList = team.userList.map(user => user.id);
  router.push({
    path: '/team/infoByOne',
    query : {
      teamId: team.id,
      userIdList:userIdList
    }
  });
}


</script>

<style scoped>
#vanCard :deep(.van-card__thumb){
    height: 75px;
    width: 75px;
}
</style>